<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>loading加载提示组件</title>
  <link rel="stylesheet" href="../src/hans-ui.css">
</head>
<body>
  <div class="tt-content">
    <!-- 页面加载提示组件 -->
    <div class="tt-panel-title">页面加载提示组件</div>
    <div class="tt-panel-body">
      <div class="tt-loading">
        <div class="tt-loading">
          <i class="fa fa-circle-o-notch fa-spin tt-loading-icon"></i>
          <span class="tt-loading-info">用力载入中...</span>
        </div>
      </div>

      <div class="tt-loading">
        <i class="fa fa-refresh tt-loading-icon"></i>
        <span class="tt-loading-info">加载出错，点我重新加载</span>
      </div>
    </div>
    <!-- 单行加载提示组件 -->
    <div class="tt-panel-title">单行加载提示组件</div>
    <div class="tt-panel-body">
      <div class="tt-loading-inline">
        <span class="tt-loading-info">
          <i class="fa fa-circle-o-notch fa-spin tt-loading-icon"></i>
          用力载入中...
        </span>
      </div>    
      <div class="tt-loading-inline">
        <span class="tt-loading-info">
          上拉加载更多
          <i class="fa fa-long-arrow-up fa-vibrate-y tt-loading-icon"></i>
        </span>
      </div>
      <div class="tt-loading-inline">
        <span class="tt-loading-info">
          我可是有底线的
        </span>
      </div>
      <div class="tt-loading-inline">
        <span class="tt-loading-info">
          ...
        </span>
      </div>
    </div>
  </div>
</body>
</html>